<template>
    <view class="container">
        <header-bar :config="config"></header-bar>
        <tab-bar :tabs="tabs" @clickTab="clickTab" :tabIndex="tabIndex"></tab-bar>
        <view class="main">
            <swiper
                v-if="loadOk"
                class="swiper"
                :style="{ height: listHeight }"
                :current="tabIndex"
                @change="swiperChange">
                <swiper-item>
                    <scroll-view :style="{ height: listHeight }" scroll-y>
                        <text class="item-head"
                            >待发货{{ WaitList.length }},总{{ WaitList.length + SendList.length }}</text
                        >
                        <view class="item" v-for="(item, index) in WaitList" :key="index">
                            <easy-pro-image customSize="160" :url="easyGetImgUrl(item.ProductImage)"></easy-pro-image>
                            <view class="pro-item-main">
                                <text class="name-text">{{ item.ProductName }}</text>
                                <text class="desc-text">{{
                                    item.DisplayAttribute ? item.DisplayAttribute : "暂无规格信息"
                                }}</text>
                                <text class="desc-text">货号：{{ item.SkuCode }}</text>
                                <view class="item-price">
                                    <text class="price flex-fill"
                                        >￥{{ item.Price }} x {{ item.Amount }} {{ item.RatioUnit }}</text
                                    >
                                    <text class="total">小计：￥{{ (item.Price * item.Amount).toFixed(2) }}</text>
                                </view>
                            </view>
                        </view>
                        <mescroll-empty v-if="WaitList.length < 1" :option="emptyOption"></mescroll-empty>
                    </scroll-view>
                </swiper-item>
                <swiper-item>
                    <scroll-view :style="{ height: listHeight }" scroll-y>
                        <text class="item-head"
                            >已发货{{ SendList.length }},总{{ WaitList.length + SendList.length }}</text
                        >
                        <view class="item" v-for="(item, index) in SendList" :key="index">
                            <easy-pro-image customSize="160" :url="easyGetImgUrl(item.ProductImage)"></easy-pro-image>
                            <view class="pro-item-main">
                                <text class="name-text">{{ item.ProductName }}</text>
                                <text class="desc-text">{{
                                    item.DisplayAttribute ? item.DisplayAttribute : "暂无规格信息"
                                }}</text>
                                <text class="desc-text">货号：{{ item.SkuCode }}</text>
                                <view class="item-price">
                                    <text class="price flex-fill"
                                        >￥{{ item.Price }} x {{ item.Amount }} {{ item.RatioUnit }}</text
                                    >
                                    <text class="total">小计：￥{{ (item.Price * item.Amount).toFixed(2) }}</text>
                                </view>
                            </view>
                        </view>
                        <mescroll-empty v-if="SendList.length < 1" :option="emptyOption"></mescroll-empty>
                    </scroll-view>
                </swiper-item>
            </swiper>
        </view>
    </view>
</template>

<script>
import tabBar from "@/components/common/tab-bar.vue"
import easyProImage from "@/components/easy/easy-pro-image.vue"
import { GetOrderSendList } from "@/service/api/order.js"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import unitsOld from "../../utils/utilsOld.js"
export default {
    components: {
        tabBar,
        easyProImage,
    },
    data() {
        return {
            listHeight: "",
            loadOk: false,
            config: {
                title: "发货记录",
                centerSlot: true,
                rightSlot: false,
                rightBtns: [
                    {
                        id: 1,
                        type: "redo",
                    },
                ],
            },
            orderId: 0,
            SendList: [],
            WaitList: [],
            tabIndex: 0,
            tabs: [
                {
                    title: "待发货",
                },
                {
                    title: "已发货",
                },
            ],
            timer: null,
        }
    },
    onLoad(e) {
        this.orderId = e.orderId
    },
    mounted() {
        this.getOrderLogList()
        this.getListHeight()
    },
    methods: {
        getListHeight() {
            //获取商品高度
            getElementHeight(this, ".main", (e) => {
                this.listHeight = e + "px"
                this.loadOk = true
            })
        },
        swiperChange(e) {
            let tabIndex = e.detail.current
            this.clickTab(tabIndex)
        },
        //tab切换
        clickTab(index) {
            if (this.tabIndex != index) {
                clearTimeout(this.timer)
                this.timer = setTimeout((time) => {
                    this.tabIndex = index
                }, 20)
            }
        },
        //
        getOrderLogList() {
            let param = {
                orderId: this.orderId,
            }
            let path = "?orderId=" + this.orderId
            GetOrderSendList(param, path).then((res) => {
                if (res.State == 1) {
                    this.SendList = res.Data.SendList
                    this.WaitList = res.Data.WaitList
                }
            })
        },
        getTotal(Price, Amount) {
            return unitsOld.mul(Price, Amount)
        },
    },
}
</script>

<style lang="scss">
.main {
    padding: 0 $app-page-padding $app-page-padding $app-page-padding;
}
.item-head {
    display: flex;
    padding: $app-page-padding 0;
    font-size: 28rpx;
    font-weight: bold;
    color: $color-gray-1;
}
.item {
    display: flex;
    flex-direction: row;
    padding: $app-page-padding;
    background: $color-white;
    // border-bottom: solid 1rpx $border;
    margin-bottom: 24rpx;
    border-radius: 16rpx;
    .pro-item-main {
        display: flex;
        flex: 1;
        flex-direction: column;
        .item-price {
            display: flex;
            flex-direction: row;
        }
        .name-text {
            font-weight: 700;
            margin-bottom: 8rpx;
        }
        .desc-text {
            color: $color-gray-2;
        }
        .total {
            font-weight: 700;
            font-size: 28rpx;
            color: $color-gray-1;
        }
    }
}
</style>
